<template>
  <div class="param-config">
    <!-- 通用配置 -->
    <el-form-item label="是否必填">
      <el-switch 
        :value="props.param.required"
        @change="updateConfig('required', $event)"
      />
    </el-form-item>

    <!-- 默认值配置 -->
    <el-form-item label="默认值">
      <component
        :is="getDefaultValueComponent"
        :value="props.param.default"
        @update="updateConfig('default', $event)"
        v-bind="getDefaultValueProps"
      />
    </el-form-item>

    <!-- 特定类型的配置 -->
    <template v-if="props.param.type === 'number'">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="最小值">
            <el-input-number 
              :value="props.param.min"
              @change="updateConfig('min', $event)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="最大值">
            <el-input-number 
              :value="props.param.max"
              @change="updateConfig('max', $event)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="步进值">
            <el-input-number 
              :value="props.param.step"
              @change="updateConfig('step', $event)"
              :step="0.1"
              :precision="2"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </template>

    <template v-else-if="props.param.type === 'select-text' || props.param.type === 'select-number'">
      <el-form-item label="选项">
        <el-table :data="options" style="width: 100%">
          <el-table-column label="标题">
            <template #default="{ row }">
              <el-input v-model="row.title" @input="updateOptions" />
            </template>
          </el-table-column>
          <el-table-column label="值">
            <template #default="{ row }">
              <el-input 
                v-if="props.param.type === 'select-text'"
                v-model="row.value" 
                @input="updateOptions"
              />
              <el-input-number
                v-else
                v-model="row.value"
                @change="updateOptions"
              />
            </template>
          </el-table-column>
          <el-table-column width="80">
            <template #default="{ $index }">
              <el-button 
                type="danger" 
                circle
                plain
                size="small"
                @click="removeOption($index)"
              >
                <el-icon><Delete /></el-icon>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px">
          <el-button type="primary" plain size="small" @click="addOption">
            添加选项
          </el-button>
        </div>
      </el-form-item>
    </template>

    <template v-else-if="props.param.type === 'upload'">
      <el-form-item label="允许的文件类型">
        <el-select
          :value="props.param.accept?.split(',')"
          @change="value => updateConfig('accept', value.join(','))"
          multiple
          style="width: 100%"
        >
          <el-option label="图片" value="image/*" />
          <el-option label="视频" value="video/*" />
          <el-option label="音频" value="audio/*" />
        </el-select>
      </el-form-item>
    </template>

    <template v-else-if="props.param.type === 'prompt'">
      <el-form-item label="AI 辅助">
        <el-switch
          :value="props.param.aiAssist"
          @change="updateConfig('aiAssist', $event)"
        />
        <div class="form-tip">
          启用后可以使用 AI 润色提示词
        </div>
      </el-form-item>
    </template>

    <template v-else-if="props.param.type === 'output'">
      <el-form-item label="产出类型" required>
        <el-select
          :value="props.param.outputType"
          @change="updateConfig('outputType', $event)"
          style="width: 100%"
        >
          <el-option label="图片" value="image" />
          <el-option label="视频" value="video" />
          <el-option label="文本" value="text" />
          <el-option label="3D模型" value="3d" />
        </el-select>
      </el-form-item>
      <el-form-item label="超时时间(秒)">
        <el-input-number
          :value="props.param.timeout"
          @change="updateConfig('timeout', $event)"
          :min="1"
          :max="300"
          :step="1"
        />
        <div class="form-tip">
          超过此时间将视为执行失败
        </div>
      </el-form-item>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { Delete } from '@element-plus/icons-vue'

const props = defineProps<{
  param: any
}>()

const emit = defineEmits(['update'])

// 选项数据
const options = ref<any[]>([])

// 初始化选项
watch(() => props.param.options, (newOptions) => {
  if (newOptions) {
    options.value = [...newOptions]
  } else {
    options.value = []
  }
}, { immediate: true })

// 获取默认值组件
const getDefaultValueComponent = computed(() => {
  switch (props.param.type) {
    case 'number':
      return 'el-input-number'
    case 'select-text':
    case 'select-number':
      return 'el-select'
    default:
      return 'el-input'
  }
})

// 获取默认值组件的属性
const getDefaultValueProps = computed(() => {
  switch (props.param.type) {
    case 'number':
      return {
        min: props.param.min,
        max: props.param.max,
        step: props.param.step
      }
    case 'select-text':
    case 'select-number':
      return {
        options: options.value.map(opt => ({
          label: opt.title,
          value: opt.value
        }))
      }
    default:
      return {}
  }
})

// 更新配置
const updateConfig = (field: string, value: any) => {
  emit('update', { [field]: value })
}

// 更新选项
const updateOptions = () => {
  emit('update', { options: options.value })
}

// 添加选项
const addOption = () => {
  options.value.push({
    title: '',
    value: props.param.type === 'select-number' ? 0 : ''
  })
  updateOptions()
}

// 删除选项
const removeOption = (index: number) => {
  options.value.splice(index, 1)
  updateOptions()
}
</script>

<style scoped>
.param-config {
  padding: 16px;
  border-top: 1px solid var(--el-border-color-light);
}

.form-tip {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.dark {
  .form-tip {
    color: #999;
  }
}
</style> 